<template>
    <div>
        <FixedHeightVue>
            <!-- 个人信息 -->
            <div class="student_info">
                <div class="img">
                    <img :src="userDetail.avatarUrl" alt="">
                </div>
                <div class="info_item">
                    <span>姓名：</span>
                    <span>{{ userInfo.name }}</span>
                </div>
                <div class="info_item">
                    <span>性别：</span>
                    <span>{{ userInfo.gender === 0 ? '男' : '女'  }} </span>
                </div>
                <div class="info_item">
                    <span>电话号码：</span>
                    <span>{{ userDetail.phone }}</span>
                </div>
                <div class="info_item">
                    <span>邮箱：</span>
                    <span>{{ userDetail.email }}</span>
                </div>
            </div>
            <!-- 数据统计 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="scroll_list">
                        <!-- 滚动标题 -->
                        <div class="scroll_title">
                            <div class="item_left" style="flex:3;">课程名称</div>
                            <div class="item_midle" style="flex: 1;">平均分</div>
                            <div class="item_right" style="flex:1;">正确率</div>
                        </div>
                        <vue3-seamless-scroll :list="statisticsLeftDataStu" class="scroll" :step="0.5"
                            limitScrollNum="7" :hover="true">
                            <div class="item" :class="{ color: index % 2 == 0 }"
                                v-for="(item, index) in statisticsLeftDataStu" :key="index">
                                <div class="item_left" style="flex:3;">{{ item.courseName }}</div>
                                <div class="item_midle" style="flex: 1;">{{ item.accuracy }}</div>
                                <div class="item_right" style="flex:1;">{{ item.percentageComplete }}%</div>
                            </div>
                        </vue3-seamless-scroll>
                    </div>

                </el-col>
                <el-col :span="6">
                    <div class="top">
                        <el-progress type="circle" :percentage="percentageComplete" width="250" stroke-width="30" />
                        <div class="echart_title">作业提交率</div>
                    </div>
                    <div class="bottom" id="bottom"></div>
                </el-col>
                <el-col :span="12">
                    <div class="rigth" id="rigth"></div>
                </el-col>

            </el-row>
        </FixedHeightVue>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue"
// 无限滚动插件
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import FixedHeightVue from "@/components/base/FixedHeight.vue";
import * as echarts from 'echarts';

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo, userDetail } = storeToRefs(useUserInfoStore)


import { ElMessage } from "element-plus";
import { getStudentStatisticsRightApi, getStudentStatisticsTopApi, getStudentStatisticsLeftApi, } from "@/api/index";

// 学生顶部的数据统计
const percentageComplete = ref(null);
// 正确率
const accuracy = ref(null);
const getStatisticsTopStu = async () => {
    const res = await getStudentStatisticsTopApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    percentageComplete.value = res.data.percentageComplete
    accuracy.value = res.data.accuracy
    initEcharts()
}


// 最近七天时间
const time = ref([])
const commentTime = () => {
    const date = new Date()
    const day = date.getDate()
    const month = date.getMonth() + 1
    const year = date.getFullYear()
    for (let i = 0; i < 7; i++) {
        time.value.push(new Date(year, month, day - i).toLocaleDateString())
    }
}
// 学生右边的图表
const statisticsRightDataStu = ref([
])
const getStudentStatisticsRight = async () => {
    const res = await getStudentStatisticsRightApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return;
    }
    statisticsRightDataStu.value = res.data.map(line => {
        return {
            name: line.courseName,
            data: line.scoreList,
            type: 'line',
            smooth: true
        }
    })
    myChartFunStu()
    // initEcharts()
}

// 初始化echarts实例 学生
const myChartFunStu = () => {
    // echarts配置
    const option = {
        xAxis: {
            type: 'category',
            data: time.value,
            name: "最近七次课程提交作业分数",
            nameLocation: "middle",
            nameTextStyle: {
                fontStyle: "normal",
                fontWeight: "bold",
                fontSize: 18
            },
            nameGap: 32
        },
        legend: {
            type: 'plain',
            right: 30,
            top: 20
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                symbol: ['none', 'arrow'],//只在末端显示箭头
                lineStyle: {
                    type: 'solid',
                    color: '#409eff',
                    // ...
                }
            },
            axisLabel: {
                show: true // 显示坐标轴标签
            },
            axisTick: {
                show: true // 显示刻度线
            }
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: "cross"
            }
        },
        series: statisticsRightDataStu.value
    }
    const myChart = echarts.init(document.querySelector('.rigth'));
    option && myChart.setOption(option);
}

// 学生左边的数据统计
const statisticsLeftDataStu = ref([
])

const getStatisticsLeftStu = async () => {
    const res = await getStudentStatisticsLeftApi({
        userId: userInfo.value.userId
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return;
    }
    statisticsLeftDataStu.value = res.data
}



//饼图


// 初始化饼图
const initEcharts = () => {
    let myOptions = {
        title: {
            text: '作业率',
            left: 'center',
            top: 'bottom'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '作业率',
                type: 'pie',
                radius: '60%',
                avoidLabelOverlap: false,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: accuracy.value, name: '正确率' },
                    { value: 100 - accuracy.value, name: '错误率' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var chartDom = document.getElementById('bottom');
    var myChart = echarts.init(chartDom);
    myOptions && myChart.setOption(myOptions);
}


onMounted(() => {
    // initEcharts()
    commentTime()
    getStatisticsLeftStu()
    getStatisticsTopStu()
    getStudentStatisticsRight()
})
</script>

<style lang="scss" scoped>
.student_info {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px #0000001a;

    .img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #ccc;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .info_item {
        margin: 0 20px;

        span {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    }
}

.scroll_list {
    height: calc(100% - 0px);
    flex: 1;
    background-color: #fff;
    margin-bottom: 15px;
    /* padding: 15px; */
    margin-bottom: 10px;
    box-shadow: 0 2px 12px #0000001a;
    transition: all ease 0.3s;
    border-radius: 10px;
    overflow: hidden;

    .scroll {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .scroll_title {
        padding: 5px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 40px;
        font-weight: bold;
        /* 底部阴影 */
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .item_left {
            flex: 1;
            text-align: center;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item_midle {
            flex: 3;

            font-size: 14px;
            text-align: center;
            /* 超出省略号 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item_right {
            flex: 2;
            text-align: center;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

        }
    }

    .scroll .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 50px;
        padding: 0 15px;

        .item_left {
            flex: 1;
            text-align: center;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item_midle {
            flex: 3;
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .item_right {
            flex: 2;
            text-align: center;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .scroll .color {
        background-color: #b3c5a41a;
    }
}

.top,
.bottom {
    width: 100%;
    height: 320px;
    background-color: #fff;
    box-shadow: 0 2px 12px #0000001a;
    border-radius: 10px;

    .echart_title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
}

.top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom {
    margin-top: 8px;
}

.rigth {
    width: 100%;
    height: 645px;
    background-color: #fff;
    box-shadow: 0 2px 12px #0000001a;
    border-radius: 10px;
}
</style>